<template>
  <div class="login_bg">
    <div class="login-form">
      <h3>独立团管理系统</h3>
      <el-input
        placeholder="用户名"
        prefix-icon="el-icon-user"
        class="inputmagin"
        v-model="user"
        clearable
      >
      </el-input>
      <el-input
        placeholder="密码"
        prefix-icon="el-icon-key"
        v-model="pwd"
        show-password
        class="inputmagin"
        clearable
      ></el-input>
      <p v-show="show">用户名或密码错误</p>
      <el-button type="success" class="inputmagin" @click="gohome"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script>
import {login} from '@/apis/users'
export default {
  data() {
    return {
      user: "",
      pwd: "",
      show:false
    };
  },
  methods: {

    gohome() {
      // console.log(this.user,this.pwd);
      
      //调用接口函数
      login({ account: this.user, password: this.pwd }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          window.localStorage.setItem("userid", res.data.id);
          //成功
          // this.$router.push("/index/main"); //让路由对象跳转到指定hash地址
          window.location.hash = "/home";


          this.$message({
            message: "登录成功！",
            type: "success",
          });
        } else {
          this.show = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login_bg {
  height: 100%;
  // background: url(../assets/imgs/ppppp.webp) no-repeat center center;
  background-color: #009688;

  .login-form {
    text-align: center;
    position: absolute;
    right: 10%;
    top: 50%;
    width: 360px;
    transform: translateY(-50%);
    padding: 20px;
    background-color: #33ABA0;
    
    h3{
      color: #fff;
      margin-bottom: 20px;
    }
    .inputmagin {
      margin: 10px 0;
      width: 360px;
      border: 0;
      background-color: #009688;
      
    }
  }
}
</style>